<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>统一转菊花遮罩页面</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      /* background: transparent; */
      height: 100%;
      position: relative;
    }

    .m-load,
    .m-load2 {
      width: 36px;
      height: 36px;
    }


    /** 加载动画的静态样式 **/
    .m-load2 {
      position: relative;
      left: calc((100% - 36px) / 2);
      top: 25%;
      /*  position: fixed;
      top: 25%;
      left: 45%; */
    }

    .m-load2 .line div {
      position: absolute;
      left: 16px;
      top: 0;
      width: 3px;
      height: 40px;
    }

    /* .m-load2 .line div:before,
    .m-load2 .line div:after {
      content: '';
      display: block;
      height: 50%;
      background: #fcfcfc;
      border-radius: 5px;
    } */
    .m-load2 .line div:after {
      content: '';
      display: block;
      height: 25%;
      background: #7f7f7f;
      border-radius: 5px;
      left: 0;
      position: absolute;
      z-index: 1;
      width: 3px;
      bottom: 0;
    }

    .m-load2 .line div:before {
      content: '';
      display: block;
      height: 25%;
      background: #7f7f7f;
      border-radius: 5px;
      right: 0;
      position: absolute;
      z-index: 1;
      width: 3px;
      top: 0;
    }

    .m-load2 .line div:nth-child(2) {
      transform: rotate(30deg);
      -webkit-transform: rotate(30deg);
    }

    .m-load2 .line div:nth-child(3) {
      transform: rotate(60deg);
      -webkit-transform: rotate(60deg);
    }

    .m-load2 .line div:nth-child(4) {
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
    }

    .m-load2 .line div:nth-child(5) {
      transform: rotate(120deg);
      -webkit-transform: rotate(120deg);
    }

    .m-load2 .line div:nth-child(6) {
      transform: rotate(150deg);
      -webkit-transform: rotate(150deg);
    }

    .m-load2 .circlebg {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 18px;
      height: 18px;
      margin: -9px 0 0 -9px;
      /* background: transparent; */
      border-radius: 18px;
    }

    /** 加载动画 **/
    @keyframes load {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @-webkit-keyframes load {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    .m-load2 .line div:nth-child(1):before {
      animation: load 1.2s linear 0s infinite;
      -webkit-animation: load 1.2s linear 0s infinite;
    }

    .m-load2 .line div:nth-child(2):before {
      animation: load 1.2s linear 0.1s infinite;
      -webkit-animation: load 1.2s linear 0.1s infinite;
    }

    .m-load2 .line div:nth-child(3):before {
      animation: load 1.2s linear 0.2s infinite;
      -webkit-animation: load 1.2s linear 0.2s infinite;
    }

    .m-load2 .line div:nth-child(4):before {
      animation: load 1.2s linear 0.3s infinite;
      -webkit-animation: load 1.2s linear 0.3s infinite;
    }

    .m-load2 .line div:nth-child(5):before {
      animation: load 1.2s linear 0.4s infinite;
      -webkit-animation: load 1.2s linear 0.4s infinite;
    }

    .m-load2 .line div:nth-child(6):before {
      animation: load 1.2s linear 0.5s infinite;
      -webkit-animation: load 1.2s linear 0.5s infinite;
    }

    .m-load2 .line div:nth-child(1):after {
      animation: load 1.2s linear 0.6s infinite;
      -webkit-animation: load 1.2s linear 0.6s infinite;
    }

    .m-load2 .line div:nth-child(2):after {
      animation: load 1.2s linear 0.7s infinite;
      -webkit-animation: load 1.2s linear 0.7s infinite;
    }

    .m-load2 .line div:nth-child(3):after {
      animation: load 1.2s linear 0.8s infinite;
      -webkit-animation: load 1.2s linear 0.8s infinite;
    }

    .m-load2 .line div:nth-child(4):after {
      animation: load 1.2s linear 0.9s infinite;
      -webkit-animation: load 1.2s linear 0.9s infinite;
    }

    .m-load2 .line div:nth-child(5):after {
      animation: load 1.2s linear 1s infinite;
      -webkit-animation: load 1.2s linear 1s infinite;

    }

    .m-load2 .line div:nth-child(6):after {
      animation: load 1.2s linear 1.1s infinite;
      -webkit-animation: load 1.2s linear 1.1s infinite;
    }
  </style>
</head>

<body>
  <!-- <div class="m-load"></div> -->
  <div
    style="width: 130px;height: 130px;padding:10px;position: fixed;top:calc((100% - 130px) / 2);left:calc((100% - 130px) / 2);">
    <div class="m-load2">
      <div class="line">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</body>
<script src="../../script/fastclick.js"></script>
<script src="../../script/zeptomin.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/app.js"></script>
<script>
  apiready = function () {
    var app = new APP();
    app.toFront('flower', 0);
  };
</script>

</html>